<template>
  <div>
    <!-- 定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/honor'}">医院荣誉</el-breadcrumb-item>
      <el-breadcrumb-item>新增信息</el-breadcrumb-item>

    </el-breadcrumb>

    <!-- 定义卡片视图 -->
   <el-card class="box-card">

      <!-- 定义页面提示信息 -->
     <el-alert title="荣誉信息" type="info" effect="dark" center show-icon :closable="false"></el-alert>

      <!-- 定义标签页 before-leave:切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 -->
      <el-form :model="addItemForm" :rules="addItemFormRules" ref="addItemFormRef" label-width="100px"
        label-position="top">
        <el-tabs v-model="activeIndex" :tab-position="'left'" >
          <el-tab-pane label="基本信息" >
            <el-form-item label="医院名称" prop="honorname">
              <el-input v-model="addItemForm.honorname"></el-input>
            </el-form-item>
            <el-form-item label="医院荣誉" prop="honormessage">
              <el-input v-model="addItemForm.honormessage"></el-input>
            </el-form-item>

           <el-form-item label="荣获时间">
               <el-col :span="11">
                 <el-date-picker type="date" placeholder="选择日期" v-model="addItemForm.honortime" style="width: 100%;"></el-date-picker>
               </el-col>
             </el-form-item>

            <!-- 定义添加商品按钮-->
            <el-button type="primary" class="addItemBtnClass" @click="addItemBtn">提交</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>

    </el-card>

  </div>
</template>

 <script>
  export default {
    data() {
      return {
        value: [],

        activeIndex: '0',
        addItemForm: {
          honorname: '',
          honormessage: '',
          honortime: '',
          phone: '',
          conditions: '',
          images: []
          //itemDesc: '',
          //dynamicArgs: [],
          //staticArgs: []
        },
        itemDesc: {
          itemDesc: ""
        },
        itemParam: {
          dynamicArray: [],
          staticArray: [],
          dynamicArgs: "",
          staticArgs: ""
        }
        ,
        addItemFormRules: {
          honorname: [{
            required: true,
            message: '请输入医院名称',
            trigger: 'blur'
          }],
          honormessage: [{
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }],


          honortime: [{
            required: true,
            message: '请输入时间',
            trigger: 'blur'
          }],

        },
        itemCatIds: [],
        itemCatList: [],
        props: {
          expandTrigger: 'hover',
          value: "id", //选中数据的value值
          label: "name", //选中数据展现名称
          children: "children", //自选项数据
        },
        //设置商品动态参数
        dynamicTableData: [],
        staticTableData: [],

        //定义文件上传路径地址
        // uploadUrl: "http://localhost:8091/file/upload",
        uploadUrl: "http://manage.jt.com/file/upload",
        //定义图片网络访问地址
        imageUrlPath: "",
        //定义图片控制开关
        dialogImageVisible: false
      }
    },

    methods: {

      /* 添加商品按钮 */
      async addItemBtn(){
        //console.log(this.addItemForm)

        //1.完成表单校验
        this.$refs.addItemFormRef.validate( valid => {
          if(!valid) return this.$message.error("请完整添写信息")
          //if(!valid) return this.$
        })




        console.log(this.addItemForm)
        let {data: result} = await this.$http.post("/honor/addHonor",this.addItemForm)
        if(result.status !== 200) return this.$message.error("添加失败")
        this.$message.success("添加成功")

        //2.5添加完成之后,将数据重定向到商品展现页面
        this.$router.push("/honor") //修改 21:09
      }
    }
  }
 </script>

<style lang="less" scoped>
  .el-steps {
    margin: 20px 0;
  }

  .el-cascader {
    width: 30%;
  }

  /* 控制复选框的右边距5像素 !important 表示优先执行 IE6不兼容*/
  .el-checkbox {
    margin: 0 10px 0 0 !important;
  }
  .addItemBtnClass{

    margin-top: 15px;
  }

</style>
